<!-- 轮值员管理 -->
<template>
  <div class="take-turns-manage">
    <CustomTree ref="treeRef" title="请选择监室" selectFirstNode api="/znjszd3/ht/lzy/getLzyJshRsList" @leafNodeClick="getNodeData"
      ><template #node="{ node }">
        {{ node.data.zdzw }} <span v-if="node.isLeaf">({{ node.data.num }})</span></template
      ></CustomTree
    >
    <div class="table-box">
      <CustomTable v-if="reqParams.jsh" ref="tableRef" type="index" v-model:form="searchForm" :requestImmediate="false" :tableHeader="tableHeader" api="/znjszd3/ht/lzy/getLzyList" :params="reqParams" lastColMinWidth="14%">
        <template #zpurl="{ row }">
          <PhotoScale :src="row.zpurl + '&token=' + userStore.token" />
        </template>
        <template #sfqymc="{ row }">
          <el-switch v-model="row.sfqy" @click.stop @change="onChange(row, $event)" active-value="Y" inactive-value="N" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
        </template>
        <template v-slot:tableTop="{ rows }">
          <el-button type="primary" class="add" plain @click="add">
            <el-icon><Plus /></el-icon>
            添加轮值员</el-button
          >
        </template>

        <template v-slot:lastColumn="{ row }">
          <el-button type="danger" plain @click.stop="del(row)">
            <el-icon><Delete /></el-icon>
            删除</el-button
          >
        </template>
      </CustomTable>
    </div>
    <CustomDialog v-model:dialogVisible="dialogVisible" title="添加轮值员" height="900rem" @confirm="confirm">
      <CustomTable
        ref="tableRef2"
        height="750rem"
        type="selection"
        multiple
        :showPagination="false"
        v-model:form="searchForm2"
        v-model:selection="selection"
        :tableHeader="tableHeader2"
        api="/znjszd3/ht/lzy/getRyxxList"
        :params="reqParams2"
      >
        <template #zpurl="{ row }">
          <PhotoScale :src="row.zpurl + '&token=' + userStore.token" />
        </template>
      </CustomTable>
    </CustomDialog>
  </div>
</template>

<script setup name="takeTurnsManage">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
import { stores } from '@/stores/index.js'
const userStore = stores.useUserStore()
import { http } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({})
const treeRef = ref()
const tableRef = ref()
const dialogVisible = ref(false)
const searchForm = ref({
  xm: ''
})
//弹框中的table搜索
const searchForm2 = ref({
  xm: ''
})
const reqParams = ref({
  jsh: ''
})
const reqParams2 = ref({
  jsh: ''
})

const selection = ref([])
const tableHeader = ref([
  {
    key: 'xm',
    label: '姓名',
    width: '15%'
  },
  {
    key: 'jsmc',
    label: '监室号',
    width: '15%'
  },
  {
    key: 'zpurl',
    label: '相片',
    width: '15%'
  },
  {
    key: 'sfqymc',
    label: '是否启用',
    width: '15%'
  },
  {
    key: 'bgr',
    label: '变更人',
    width: '15%'
  },
  {
    key: 'bgsj',
    label: '变更时间',
    width: '15%'
  }
])
//弹框中的table 表头
const tableHeader2 = ref([
  {
    key: 'xm',
    label: '姓名'
  },
  {
    key: 'jszw',
    label: '监室号'
  },
  {
    key: 'xb',
    label: '性别'
  },
  {
    key: 'zpurl',
    label: '相片'
  }
])
const getNodeData = (node) => {
  reqParams.value.jsh = node.zddm
  reqParams2.value.jsh = node.zddm

  nextTick(() => {
    tableRef.value.getData()
  })
}
const add = () => {
  dialogVisible.value = true
}
const confirm = () => {
  if (selection.value.length == 0) return ElMessage.warning('请先选择人员')

  const arr = selection.value.map((item) => {
    return {
      rybh: item.rybh,
      xm: item.xm,
      jsh: item.jsh,
      sfqy: 'Y'
    }
  })

  http('/znjszd3/ht/lzy/addLzyList', 'post', arr, false).then((res) => {
    if (res.status == 200) {
      ElMessage.success(res.message[0])
      tableRef.value.getData()
      treeRef.value.getData()
      dialogVisible.value = false
    }
  })
}
const del = (row) => {
  ElMessageBox.confirm('确定要删除该条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http(
        '/znjszd3/ht/lzy/delLzyById',
        'post',
        {
          id: row.id
        },
        false
      ).then((res) => {
        if (res.status == 200) {
          ElMessage.success(res.message[0])
          treeRef.value.getData()
          tableRef.value.getData()
        }
      })
    })
    .catch(() => {})
}
//是否启用
const onChange = (row, e) => {
  if (row.id) {
    http(
      '/znjszd3/ht/lzy/updateLzyForSfqy',
      'post',
      {
        id: row.id,
        sfqy: e
      },
      false
    ).then((res) => {
      if (res.status == 200) {
        ElMessage.success(res.message[0])
        tableRef.value.getData()
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.take-turns-manage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  .table-box {
    margin: 10px;
    width: calc(100% - 210px);
    height: 965px;
    ::v-deep(.custom-table) {
      .add {
        .el-icon {
          font-size: 18px !important;
        }
      }
    }
  }
  // ::v-deep(.custom-dialog) {
  //   .custom-table {
  //     border: var(--el-border);
  //   }
  // }
}
</style>
